<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="./assets/style.css">

    <style>
        #app {
            font-family: "Avenir", Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-align: center;
            color: #2c3e50;
            padding-top: 60px;
        }

        .methods {
            padding: 20px 0;
            background-color: #fff;
            border-top: 1px solid #eee;
        }

        .input {
            padding: 8px;
            border: 1px solid #eee;
        }
    </style>
</head>

<body>
    <div id="app">
        <img alt="Vue logo" src="./assets/logo.png" />

        <div class="methods" @click="setDate">点击获取当前时间：{{date}}</div>
        <div class="methods justify-center" style="flex-direction: column;">
            <div>
                <input class="input" v-model="valid_str" @input="validStringType" placeholder="需要验证的值" />
                <select class="input" v-model="valid_type" @change="validStringType">
                    <option value disabled>需要验证类型</option>
                    <option :value="item" v-for="(item,index) of valid_type_list" :key="index">{{item}}</option>
                </select>
            </div>
            <div>验证结果：{{valid_boolean}}</div>
        </div>
        <div class="methods">
            <input class="input" v-model="cardNo" placeholder="银行卡号" />
            <button @click="getBankInfo">获取银行卡号信息</button>
            <div v-if="bank_info.bank">
                <img :src="'https://apimg.alipay.com/combo.png?d=cashier&t='+bank_info.bank" />
            </div>
            <div v-if="bank_info.bank">发卡行：{{bank_info.bankName}}（{{bank_info.bank}}）</div>
            <div v-if="bank_info.cardType">银行卡类别：{{bank_info.cardTypeName}}（{{bank_info.cardType}}）</div>
        </div>
        <div class="methods justify-center" style="flex-direction: column;">
            <div>
                <input class="input" v-model="clip" placeholder="需要复制的内容" />
                <button @click="setClipboard">内容复制</button>
            </div>
            <div>
                <span>{{copy_clip}}</span>
                <button @click="getClipboard">点击粘贴</button>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="./dist/wedjs.min.js"></script>
    <script type="text/javascript">
        _.request.defaults.baseURL = 'https://ccdcapi.alipay.com'
        let c_req = _.request.interceptors.request.use(function (config) {
            console.log(config)
            return config
        })
        var app = new Vue({
            el: '#app',
            data: {
                date: '',
                valid_str: '',
                valid_type: 'email',
                valid_type_list: '',
                valid_type_list: ["email", "mobile", "tel", "idcard", "url"],
                valid_boolean: false,
                cardNo: '',
                bank_info: {},
                clip: "",
                copy_clip: "",
            },
            methods: {
                setDate() {
                    this.date = _.date("Y-m-d H:i:s");
                },
                validStringType() {
                    this.valid_boolean = _.validStringType(this.valid_str, this.valid_type);
                },
                getBankInfo() {
                    let _this = this;

                    let a = _.request.get("/validateAndCacheCardInfo.json", {
                        data: {
                            cardNo: this.cardNo,
                            cardBinCheck: true
                        },
                    })
                        .then((res) => { console.log(res) })
                        .catch(err => { console.log(err) })

                    _.getBankInfo({
                        cardNo: this.cardNo,
                        success(res) {
                            _this.bank_info = res;
                        },
                        fail(res) {
                            console.warn(res);
                        }
                    });
                },
                setClipboard(){
                    _.setClipboard(this.clip)
                },
                getClipboard(){
                    _.getClipboard().then((text) => {
                        console.log(text)
                        this.copy_clip = text
                    }).catch((err) => {
                        console.error(err)
                        
                    })
                }
            },
        })
    </script>
</body>

</html>